<template>
    <div class="footer">
        <div class="top">
            <div class="wrapper">
                <ul class="top_list">
                    <li>
                        <p>客户服务</p>
                        <div class="fl">
                            <div class="left">
                                <i class="iconfont icon-xiaoxi-xiaoxi"></i>
                                <span>在线客服</span>
                            </div>
                            <div class="right">
                                <i class="iconfont icon-gerenzhongxin-wentifankui"></i>
                                <span>问题反馈</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>关注我们</p>
                        <div class="fl">
                            <div class="left">
                                <i class="iconfont icon-weixin"></i>
                                <span>公众号</span>
                            </div>
                            <div class="right">
                                <i class="iconfont icon-xinlangweibo"></i>
                                <span>微博</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>下载APP</p>
                        <div class="fl">
                            <div class="left">
                                <img src="@/assets/ewm.jpg" alt="">
                            </div>
                            <div class="nob">
                                <span>扫描二维码</span>
                                <span>立马下载APP</span>
                                <el-button>下载页面</el-button>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>服务热线</p>
                        <div>
                            <p class="tel">400-0000-000</p>
                            <span>周一至周日 8:00-18:00</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="wrapper">
                <div class="btop">
                    <img src="@/assets/footer.jpg" alt="">
                </div>
                <div class="bbot">
                    <ul class="bot_list">
                        <li>关于我们</li>
                        <li>帮助中心</li>
                        <li>售后服务</li>
                        <li>配送与验收</li>
                        <li>商务合作</li>
                        <li>搜索推荐</li>
                        <li>友情链接</li>
                    </ul>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeView"
}
</script>

<style lang="less" scoped>
@import "@/utils/iconfont.css";
.footer{
    width:100%;
    height:600px;
    .wrapper{
        padding:0 250px;
    }
    .top{
        height:250px;
        background:#fff;
        .top_list{
            width:100%;
            display:flex;
            list-style:none;
            
            li{
                width:20%;
                margin-top:60px;
                text-align:center;
                padding:0 2%;
                border-right:1px solid #f2f2f2;
                p{
                    font-size:18px;
                    color:#999;
                }
                .fl{
                    display:flex;
                    justify-content: space-evenly;
                    div{
                        width:80px;
                        height:80px;
                        border:1px solid #999;
                        i{
                            color:#666;
                            display:block;
                            font-size:22px;
                            margin-top:15px;
                            margin-bottom:10px;
                        }
                        span{
                            color:#999;
                            display:block;
                            font-size:13px;
                        }
                        img{
                            margin-top:5px;
                        }
                        .el-button{
                            width:100px;
                            height:30px;
                            line-height:0px;
                            background:#27bb9a;
                            text-align:center;
                            margin-top:5px;
                            color:#fff;
                            margin-left:-5px;
                        }
                    }
                    .nob{
                        border:0;
                        span{
                            margin-top:5px;
                        }
                    }
                    .right{
                        margin-left:-20px;
                    }
                }
                .tel{
                    color:#333;
                    font-size:18px;
                    margin-top:30px;
                    margin-bottom:5px;
                }
                &:last-child{
                    border-right:0;
                }
            }
            
        }
    }
    .bottom{
        height:350px;
        background:#333;
        color:#fff;
        .btop{
            height:80px;
            line-height:80px;
            border-bottom:1px solid #434343;
            text-align:center;
            padding:30px 0;
        }
        .bbot{
            width:100%;
            margin-top:40px;
            text-align:center;
            .bot_list{
                width:560px;
                list-style:none;
                display:flex;
                margin:0 auto;
                li{
                    font-size:14px;
                    color:#999;
                    padding:0 10px;
                    border-right:1px solid #999;
                    &:last-child{
                        border-right:0;
                    }
                }
                
            }
            p{
                color:#999;
            }
        }
    }
}
</style>